
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>出现Bug如何去定位 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>出现Bug如何去定位 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">方法论</div>
          <div class="card-question">在分析程序异常时，推荐的查看异常信息的顺序是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">方法论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">推荐的异常分析过程是从下到上，即从异常信息的最下面开始寻找有用的信息，重点关注异常的具体信息和抛出的异常类型，而非通篇的异常栈。</div>
          </div>
          <div class="card-source">来源: 异常分析</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">步骤</div>
          <div class="card-question">根据文档，定位一个程序 Bug 的三个核心步骤是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">步骤</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 查看异常信息，了解问题原因（例如 404 错误代表路径问题）。2. 查看异常的名称/类型（例如 feign.FeignException$NotFound），并查阅相关技术文档。3. 查看异常栈，定位是哪个具体技术或框架抛出的 Bug（例如 feign）。</div>
          </div>
          <div class="card-source">来源: 异常分析</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">知识点</div>
          <div class="card-question">文档中提到的 404 错误通常意味着什么问题？应该如何排查？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">知识点</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">404 错误通常意味着路径问题，原因可能是地址写错了，或者接口没有被定义。排查时应检查从客户端请求到服务端的完整调用链，确认服务的配置和路径是否正确，并可以通过断点或日志调试来判断接口是否被成功初始化。</div>
          </div>
          <div class="card-source">来源: 异常分析</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">如果单从异常信息中无法直接判断问题原因，下一步应该怎么做？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应该查看异常的类型（例如 feign.FeignException$NotFound），然后可以到对应技术的API文档中查找该异常抛出的具体原因，再结合自己的项目情况来定位问题。</div>
          </div>
          <div class="card-source">来源: 异常分析</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">异常栈信息（Stack Trace）在定位问题时有何具体作用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">异常栈信息可以帮助定位是哪个技术或框架抛出了异常。例如，通过异常栈可以看出异常是由 feign 抛出的，这样就可以结合其他异常信息（如404）更精确地在该技术范围内定位问题。</div>
          </div>
          <div class="card-source">来源: 异常分析</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">实践</div>
          <div class="card-question">为了避免在同一个问题上反复出错，文档推荐了什么好习惯？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">实践</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">推荐将每次遇到的问题、解决方法以及如何避免再次发生都记录下来。这样做的目的有两个：一是加深对该 Bug 的影响，二是当未来再次遇到类似问题时可以快速解决。</div>
          </div>
          <div class="card-source">来源: 如何避免</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
